import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NzInputModule } from 'ng-zorro-antd/input';
import { NzInputNumberModule } from 'ng-zorro-antd/input-number';

@Component({
  selector: 'app-input-number-formatter',
  standalone: true,
  imports: [NzInputNumberModule, NzInputModule, FormsModule],
  template: `
    <p class="demo">
      <nz-input-number
        [(ngModel)]="value"
        nzMin="0"
        nzMax="10"
        nzStep="1"
        [nzFormatter]="dollarFormatter"
        [nzParser]="dollarParser"
      />
    </p>

    <p class="demo">
      <nz-input-number
        [(ngModel)]="value"
        nzMin="0"
        nzMax="100"
        nzStep="1"
        [nzFormatter]="percentFormatter"
        [nzParser]="percentParser"
      />
    </p>
  `,
})
export class InputNumberFormatterComponent {
  value: number | '' = '';

  dollarFormatter = (value: number): string | number => {
    console.log('formatter', value, typeof value);
    return `$ ${value}`;
  };

  dollarParser = (value: string): string => {
    console.log('parser', value, typeof value);
    return value.replace(/\$ /, '');
  };

  percentFormatter = (value: number): string | number => {
    console.log('formatter', value, typeof value);
    return `${value} %`;
  };

  percentParser = (value: string): string => {
    console.log('parser', value, typeof value);
    return value.replace(/ %/, '');
  };
}
